<!doctype html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"
        integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP" crossorigin="anonymous" />
    <link rel="stylesheet" href="/mobile/css/app.css">
    <title>Products</title>
</head>

<body class="mdui-theme-primary-red mdui-drawer-body-left">
    <div class="mdui-container-fluid">
        <div class="mdui-toolbar mdui-color-deep-orange-700">
            <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#drawer'}"><i
                    class="mdui-icon material-icons">menu</i></a>
            <span class="mdui-typo-title">花园家政</span>
            <div class="mdui-toolbar-spacer"></div>
            <a href="javascript:;">北京</a>
        </div>
        <div class="mdui-row">
            <img class="mdui-img-fluid" src="/mobile/img/banner02.png" />
        </div>
        <div class="mdui-container">
            <div class="mdui-chip mdui-m-t-2  mdui-m-b-1">
                <span class="mdui-chip-title">推荐服务</span>
            </div>
            <div class="mdui-row">
                <ul class="mdui-list">
                    <li class="mdui-list-item mdui-list-item-active mdui-ripple">
                        <div class="mdui-list-item-avatar"><img src="/mobile/img/avatar.jpg" style="width=100px;"/></div>
                        <div class="mdui-list-item-content">
                            <div class="mdui-list-item-title">Brunch this weekend?</div>
                            <div class="mdui-list-item-text mdui-list-item-one-line"><span
                                    class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood
                                ...</div>
                        </div>
                    </li>
                    <li class="mdui-divider-inset mdui-m-y-0"></li>
                    <li class="mdui-list-item mdui-ripple">
                        <div class="mdui-list-item-avatar"><img src="/mobile/img/avatar2.jpg" /></div>
                        <div class="mdui-list-item-content">
                            <div class="mdui-list-item-title">Summer BBQ</div>
                            <div class="mdui-list-item-text mdui-list-item-one-line"><span
                                    class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could
                                ...</div>
                        </div>
                    </li>
                    <li class="mdui-divider-inset mdui-m-y-0"></li>
                    <li class="mdui-list-item mdui-ripple">
                        <div class="mdui-list-item-avatar"><img src="/mobile/img/avatar3.jpg" /></div>
                        <div class="mdui-list-item-content">
                            <div class="mdui-list-item-title">Oui oui</div>
                            <div class="mdui-list-item-text mdui-list-item-one-line"><span
                                    class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
                            </div>
                        </div>
                    </li>
                    <li class="mdui-divider-inset mdui-m-y-0"></li>
                    <li class="mdui-list-item mdui-ripple">
                        <div class="mdui-list-item-avatar"><img src="/mobile/img/avatar3.jpg" /></div>
                        <div class="mdui-list-item-content">
                            <div class="mdui-list-item-title">Oui oui</div>
                            <div class="mdui-list-item-text mdui-list-item-one-line"><span
                                    class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
                            </div>
                        </div>
                    </li>
                    <li class="mdui-divider-inset mdui-m-y-0"></li>
                    <li class="mdui-list-item mdui-ripple">
                        <div class="mdui-list-item-avatar"><img src="/mobile/img/avatar3.jpg" /></div>
                        <div class="mdui-list-item-content">
                            <div class="mdui-list-item-title">Oui oui</div>
                            <div class="mdui-list-item-text mdui-list-item-one-line"><span
                                    class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
                            </div>
                        </div>
                    </li>
                    <li class="mdui-divider-inset mdui-m-y-0"></li>
                    <li class="mdui-list-item mdui-ripple">
                        <div class="mdui-list-item-avatar"><img src="/mobile/img/avatar3.jpg" /></div>
                        <div class="mdui-list-item-content">
                            <div class="mdui-list-item-title">Oui oui</div>
                            <div class="mdui-list-item-text mdui-list-item-one-line"><span
                                    class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
                            </div>
                        </div>
                    </li>
                    <li class="mdui-divider-inset mdui-m-y-0"></li>
                    <li class="mdui-list-item mdui-ripple">
                        <div class="mdui-list-item-avatar"><img src="/mobile/img/avatar3.jpg" /></div>
                        <div class="mdui-list-item-content">
                            <div class="mdui-list-item-title">Oui oui</div>
                            <div class="mdui-list-item-text mdui-list-item-one-line"><span
                                    class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
                            </div>
                        </div>
                    </li>
                    <li class="mdui-divider-inset mdui-m-y-0"></li>
                    <li class="mdui-list-item mdui-ripple">
                        <div class="mdui-list-item-avatar"><img src="/mobile/img/avatar3.jpg" /></div>
                        <div class="mdui-list-item-content">
                            <div class="mdui-list-item-title">Oui oui</div>
                            <div class="mdui-list-item-text mdui-list-item-one-line"><span
                                    class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
                            </div>
                        </div>
                    </li>
                    <li class="mdui-divider-inset mdui-m-y-0"></li>
                    <li class="mdui-list-item mdui-ripple">
                        <div class="mdui-list-item-avatar"><img src="/mobile/img/avatar3.jpg" /></div>
                        <div class="mdui-list-item-content">
                            <div class="mdui-list-item-title">Oui oui</div>
                            <div class="mdui-list-item-text mdui-list-item-one-line"><span
                                    class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
                            </div>
                        </div>
                    </li>
                    <li class="mdui-divider-inset mdui-m-y-0"></li>
                    <li class="mdui-list-item mdui-ripple">
                        <div class="mdui-list-item-avatar"><img src="/mobile/img/avatar3.jpg" /></div>
                        <div class="mdui-list-item-content">
                            <div class="mdui-list-item-title">Oui oui</div>
                            <div class="mdui-list-item-text mdui-list-item-one-line"><span
                                    class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
                            </div>
                        </div>
                    </li>
                    <li class="mdui-divider-inset mdui-m-y-0"></li>
                    <li class="mdui-list-item mdui-ripple">
                        <div class="mdui-list-item-avatar"><img src="/mobile/img/avatar3.jpg" /></div>
                        <div class="mdui-list-item-content">
                            <div class="mdui-list-item-title">Oui oui</div>
                            <div class="mdui-list-item-text mdui-list-item-one-line"><span
                                    class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="mdui-drawer mdui-color-grey-200" id="drawer">
        <ul class="mdui-list">
            @auth
                <li class="mdui-list-item mdui-ripple  mdui-m-t-2 mdui-m-b-2">
                    <div class="mdui-list-item-avatar"><img src="/mobile/img/avatar4.png" /></div>
                    <div class="mdui-list-item-content">
                        <div class="mdui-list-item-title">手机用户0918</div>
                        <div class="mdui-list-item-text mdui-list-item-one-line">
                            <span class="mdui-text-color-theme-text">欢迎您</span>
                        </div>
                    </div>
                </li>
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">call_outline</i>
                    <div class="mdui-list-item-content">
                        <div class="mdui-list-item-title mdui-list-item-one-line">咨询服务</div>
                    </div>
                </li>
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">contacts</i>
                    <div class="mdui-list-item-content">
                        <div class="mdui-list-item-title mdui-list-item-one-line">我的地址</div>
                    </div>
                </li>
                <li class="mdui-divider"></li>
                <li class="mdui-list-item mdui-ripple">
                    <form method="POST" action="{{ route('logout') }}" id="logoutForm">
                        @csrf
                        <button class="mdui-btn mdui-btn-block mdui-color-theme" id="logoutBtn">退出登录</button>
                    </form>
                </li>
            @endauth
            @guest
                <li class="mdui-list-item mdui-ripple">
                    <button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple" id="loginBtn">手机登录</button>
                </li>
            @endguest
        </ul>
    </div>
    <div class="mdui-row mdui-text-center mdui-m-t-2 mdui-m-b-5 footer">
        <div class="mdui-col-xs-12 mdui-m-b-5" class="mdui-text-color-theme">
            <a href="#" class="mdui-text-color-theme">欢生活服务</a>
            <p>Copyright © 2020 HuanLifeServer.Group</p>
        </div>
    </div>
    <script src=" https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"
        integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+" crossorigin="anonymous">
    </script>
    <script>
        var $ = mdui.$;
        var ccDialog;
        $(function() {
            $("#logoutBtn").on("click", function() {
                $("#logoutForm").submit();
            })
            $("#loginBtn").on("click", function() {
                location = "/login"
            })

            $("#checkCouponDialog").on('confirm.mdui.dialog', function() {
                var couponTxt = $("#couponTxt").val();
                console.log(couponTxt);
                $("#checkCouponDialog").removeClass("mdui-textfield-invalid");
                $.ajax({
                    method: 'GET',
                    url: '/m/my/check_coupon',
                    dataType: 'json',
                    data: {
                        coupon_code: couponTxt
                    },
                    success: function(data) {
                        console.log(data);
                        if (data.state == true) {
                            ccDialog.close();
                            location = "/m/my/reserve?coupon_code=" + couponTxt
                            return true;
                        } else {
                            console.log(data.message);
                            if ($("#couponTxt").next().hasClass("mdui-textfield-error")) {
                                $("#couponTxt").next().html(data.message);
                                $("#checkCouponDialog").addClass(
                                    "mdui-textfield-invalid");
                            }
                            return false;
                        }
                    }
                });
            })
        })

        function openCheckDialog() {
            ccDialog = new mdui.Dialog("#checkCouponDialog", {
                history: false,
                closeOnConfirm: false
            })
            $("#couponTxt").val("");
            ccDialog.open();
            return false;
        }

    </script>
</body>

</html>
